<template>
  <div class="pre-accepted-bill">
    <a-tabs v-model:activeKey="activeKey" @change="changeTabHandle">
      <a-tab-pane key="1" :tab="`待接收(${pageStat['1']})`"></a-tab-pane>
      <!-- <a-tab-pane key="2" :tab="`已接收(${pageStat['2']})`"></a-tab-pane> -->
    </a-tabs>
    <super-table
      height="650"
      ref="tableRef"
      v-model:page="searchForm.pageNum"
      v-model:limit="searchForm.pageSize"
      :loading="loading"
      :data="tableData"
      :total="searchForm.total"
      :column="tableColumn"
      @change-page="getData"
    >
      <template #tool>
        <template v-if="activeKey === '1'">
          <a-button type="primary" @click="batchReceivePayableStatementHandle">接收账单</a-button>
        </template>
      </template>
      <template #action="{ row }">
        <template v-if="activeKey === '1'">
          <!-- <a-button type="link" @click="showDetailsHandle(row)">详情</a-button> -->
          <a-button type="link" @click="receivePayableStatementHandle(row)">接收账单</a-button>
        </template>
        <!-- <template v-else>
          <a-button type="link" @click="showDetailsHandle(row)">详情</a-button>
        </template> -->
      </template>
    </super-table>
    <!-- 抽屉 -->
    <a-drawer class="custom-drawer" v-model:visible="drawerOpts.visible" :title="drawerOpts.title" :maskClosable="false" :closable="true" @close="getData" :width="drawerOpts.width" placement="right">
      <component v-model:visible="drawerOpts.visible" :is="drawerOpts.component" :type="drawerOpts.type" :pass-data="drawerOpts.passData" @submit="drawerSubmitHandle"></component>
    </a-drawer>
    <!-- 弹窗 -->
    <a-modal v-model:visible="dialogOpts.visible" :maskClosable="false" :keyboard="false" :closable="false" :footer="null" :title="dialogOpts.title" :width="dialogOpts.width">
      <component v-model:visible="dialogOpts.visible" :is="dialogOpts.component" :type="dialogOpts.type" :pass-data="dialogOpts.passData" @submit="dialogSubmitHandle"></component>
    </a-modal>
  </div>
</template>
<script lang="ts">
import ChooseStatementType from "../chooseStatementType/index.vue";
import Details from "../details/index.vue";
export default {
  components: {
    ChooseStatementType,
    Details
  }
};
</script>
<script lang="ts" setup>
import { toRefs, watch } from "vue";
import { tableColumn } from "./data";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import ModalHook from "@/hook/modalHook";
const props = withDefaults(
  defineProps<{
    visible: boolean;
  }>(),
  {}
);
const { visible } = toRefs(props);
const { searchForm, tableData, tableRef, dialogOpts, drawerOpts, activeKey, loading, pageStat } = InitHook();
const {
  searchHandle,
  getData,
  changeTabHandle,
  receivePayableStatementHandle,
  batchReceivePayableStatementHandle
  //  showDetailsHandle
} = OperationHook({
  searchForm,
  tableData,
  tableRef,
  activeKey,
  loading,
  pageStat,
  dialogOpts,
  drawerOpts
});
const { drawerSubmitHandle, dialogSubmitHandle } = ModalHook({
  drawerOpts,
  dialogOpts,
  callBack: () => searchHandle()
});
searchHandle();
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) searchHandle();
  }
);
</script>
<style lang="stylus" scoped>
.pre-accepted-bill{
    background-color: #fff;
    padding: 12px;
    height: 100%;
}
</style>
